<template>
  <div class="project-list-warp">
    <mt-loadmore
      :top-method="loadTop"
      :bottom-method="loadBottom"
      :bottom-all-loaded="allLoaded"
      ref="loadmore"
      :autoFill="false">
      <ul class="content">
        <router-link :to="'/project/details/' + list.id" tag="li" class="common-item-box" v-for="(list, key) in projectListData" :key="key">
          <div :class="['idx-warp-l','vm-icon', list.iconClass]"></div>
          <div class="idx-warp-r">
            <div class="idx-r-t">
              <span class="t-type">{{ list.typeid }}</span>
              <span class="t-time">{{ list.posttime }}</span>
            </div>
            <p class="idx-r-b">{{ list.stitle }}</p>
            <div class="idx-r-f">
              <span class="f-area">地址：{{ list.province }}</span>
              <span :class="['f-type',list.className]">阶段：{{ list.times }}</span>
            </div>
          </div>
        </router-link>
      </ul>
    </mt-loadmore>
  </div>
</template>

<script>
import { getVmIndexProjectData } from '@/api/index.js'
import { mapState } from 'vuex'
export default {
    data () {
      return {
        projectPage: 1,
        allLoaded: false,
        projectValue: ''
      }
    },
    created () {
      this.getProjectData(true);
    },
    computed: {
      ...mapState({
        projectListData: state => state.project.projectListData,
        getSearchHistory: state => state.project.searchHistory
      })
    },
    mounted () {
      this.$root.Bus.$on('vmCommonSearchV', (value) => {
        this.projectValue = value;
        this.getProjectData(true);
      })
    },
    methods: {
      loadTop() {
        this.projectPage = 1;
        this.allLoaded = false;
        this.getProjectData(true,'top');
      },
      loadBottom () {
        this.projectPage ++;
        this.getProjectData(false,'bottom');
      },
      getProjectData (reset, loadmoreType) {
        let data = {
          page: this.projectPage,
          companyName: this.projectValue
        };
        if (this.getSearchHistory !== null) {
          Object.assign(data,this.getSearchHistory);
        }
        getVmIndexProjectData({...data}).then(res => {
          let projectInfoArr = res.data.data.data;
          if ( !projectInfoArr.length ) {
            this.allLoaded = true;
          }
          projectInfoArr = projectInfoArr.map(( item, key, arr ) => {
            switch ( item.typeid ) {
              case "电力":
                item.iconClass = 'power';
                break;
              case "环保":
                item.iconClass = 'environmental';
                break;
              case "石油石化":
                item.iconClass = 'petrochemical';
                break;
              case '冶金':
                item.iconClass = 'metallurgy';
                break;
              case '化工':
                item.iconClass = 'chemical';
                break;
              case '交通':
                item.iconClass = 'traffic';
                break;
              case '建筑':
                item.iconClass = 'architecture';
                break;
              case "制药":
                item.iconClass = 'pharmacy';
                break;
              case "其他行业":
                item.iconClass = 'other';
                break;
              default:
                item.iconClass = 'other';
                break;
            }
            switch (item.times) {
              case '手续审批':
                item.className = 'examining';
                break;
              case '立项申报':
                item.className = 'entryDeclaration';
                break;
              case '工程设计':
                item.className = 'projectEd';
                break;
            }
            return item;
          });
          if ( reset ) {
            this.$store.dispatch("storageProjectList", projectInfoArr);
          } else {
            if (this.projectListData.length) {
              this.$store.dispatch("storageProjectList", this.projectListData.concat(projectInfoArr));
            } else {
              this.$store.dispatch("storageProjectList", projectInfoArr);
            }
          }
          if ( loadmoreType == 'top' ) {
            this.$refs.loadmore.onTopLoaded();
          } else if ( loadmoreType == 'bottom' ){
            this.$refs.loadmore.onBottomLoaded();
          }
        })
      }
    }
}
</script>

<style scoped lang="scss">
.project-list-warp {
  height: calc( 100% - 120px );
  background-color: #fff;
  margin-top: 20px;
  overflow: scroll;
}
</style>
